<template>
    <div class="page-container">
        <van-nav-bar title="笔记发布" left-arrow @click-left="goBack" />
        <van-uploader
            v-model="fileList"
            multiple
            :max-count="9"
            upload-icon="photo"
            upload-text="上传文章图片"
            :after-read="uploadImage"
        />

        <van-cell-group class="input-container">
            <van-field
                v-model="form.title"
                placeholder="请输入文章标题"
                input-align="left"
                :border="false"
                class="title-input"
            />
            <van-field
                v-model="form.content"
                type="textarea"
                placeholder="请输入文章内容"
                input-align="left"
                :border="false"
                class="content-input"
                rows="4"
                autosize
            />
        </van-cell-group>

        <van-button
            type="danger"
            class="submit-button"
            @click="submitArticle"
            :loading="submitting"
        >
            提交
        </van-button>
    </div>
</template>
  
  <script>
import { Uploader, Button, Field, CellGroup, NavBar } from "vant";
import axios from "axios";
import { AddGrass } from "../../api/grass";
import base from "../../api/base.js";

export default {
    components: {
        [Uploader.name]: Uploader,
        [Button.name]: Button,
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [NavBar.name]: NavBar,
    },
    data() {
        return {
            form: {
                title: "",
                content: "",
                imgList: [],
            },
            fileList: [],
            submitting: false,
        };
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        async uploadImage(file) {
            const formData = new FormData();
            formData.append("file", file.file);

            this.$api.grass.UploadImg(formData).then(res => {
                this.form.imgList.push(res.data.data)
                console.log(this.form.imgList);
            })

            // try {
            //     const response = await axios.post("/app/article/upload", formData, {
            //         headers: {
            //             "Content-Type": "multipart/form-data",
            //             // token: window.sessionStorage.getItem("appToken"),
            //         },
            //     });

            //     if (response.data.code==200) {
            //         this.form.imgList.push(response.data.data)
            //         console.log(this.form.imgList);
            //         //this.$toast("图片上传成功");
            //         // 这里可以根据后端返回的图片URL更新fileList或进行其他操作
            //     } else {
            //         //this.$toast("图片上传失败");
            //     }
            // } catch (error) {
            //     //this.$toast("网络错误");
            // }
        },

        async submitArticle() {
            // this.submitting = true;
            this.$api.grass.AddGrass(this.form).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    this.$message.success("发表文章成功");
                    this.resetForm();
                }
            });
        },
        resetForm() {
            this.fileList = [];
            this.form.title = "";
            this.form.content = "";
        },
    },
};
</script>
  
<style scoped>
.page-container {
  padding: 10px; /* 在页面容器两边添加间距 */
}

.input-container {
  margin-top: 20px;
}

.title-input,
.content-input {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  box-sizing: border-box;
  /* 在输入框两边添加间距 */
  margin-left: 10px;
  margin-right: 10px;
}

.submit-button {
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
  /* 在按钮两边添加间距 */
  margin-left: 10px;
  margin-right: 10px;
}
</style>
  